<template>
	<div class="cartcontrol">
		<transition name='move'>
			<div class="cart-decrease" v-show="food.count>0" @click.stop="decreaceCart"></div>
		</transition>
		<transition name='move'>
			<div class="cart-count" v-show="food.count>0">{{food.count}}</div>
		</transition>
		<div class="cart-add" @click.stop.prevent="addCart"></div>
	</div>
</template>

<script>
	export default{
		props:{
			food:{
				type: Object,
				default(){
					return {
		  				count:2
		  			}
				}
			}
		},
		created(){
			
		},
		computed:{
			
		},
		methods:{
			addCart(event){
				console.log(this.food)
				if(!event._constructed){
					return;
				}
				if(!this.food.count){
					this.$set(this.food,'count',1);
				}else{
					this.food.count++;
				}
				this.$emit('cartadd', event.target);
				console.log('子组件发送数据')
			},
			decreaceCart(event){
				if(!event._constructed){
					return;
				}
				if(this.food.count){
					this.food.count--;
				}
			}
		}
	}
</script>

<style lang="stylus">
	.move-enter-active,.move-leave-active {
		opacity: 1;
	  transition: all .3s ease;
	}
	.move-enter, .move-leave-to{
	  transform: translateX(10px);
	  opacity: 0;
	}

	.cartcontrol{
		font-size: 0;
		height: 25px;
		line-height: 25px;
		.cart-decrease,.cart-add{
			display: inline-block;
			width: 25px;
			height: 25px;
			background: url(assets/cart_decrease.png) no-repeat;
			background-size: contain;
			vertical-align: top;
		}
		.cart-count{
			display: inline-block;
			padding:0 12px;
			text-align: center;
			font-size: 12px;
			line-height: 25px;
		}
		.cart-add{
			background-image: url(assets/cart_add.png);
		}
	}
</style>